<!doctype html>

<html>
  <head>
    <title>Riot todo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="todo.css">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script>html5.addElements('todo')</script>
    <![endif]-->

  </head>

  <body>

    <todo>
	    <h3>{opts.title}</h3>
      <ul>
        <li each="{items.filter(filter)}">
          <label class="{completed: done}">
            <input type="checkbox" checked="{done}" onchange="{parent.toggle}"> {title}
          </label>
        </li>
      </ul>
      <form onsubmit="{add}"> <input name="input" oninput="{edit}">
        <button disabled="{!input.value}">Add #{items.filter(filter).length + 1}</button>
      </form>
    </todo>

    <script src="../riot.js"></script>
    <script src="todo.js"></script>

    <script>
    riot.mount('todo', {
      title: 'I want to behave!',
      items: [
        { title: 'Avoid excessive coffeine', done: true, hidden: false },
        { title: 'Hidden item', done: false, hidden: true },
        { title: 'Be less provocative', done: false, hidden: false  },
        { title: 'Be nice to people', done: false, hidden: false }
      ]
    })
    </script>

  </body>

</html>
